<template>
  <div ref="refchart" class="my-chart"></div>
</template>

<script setup>
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref } from "vue";
import echarts from "../utils/echarts";

const props = defineProps({
  options: Object
});

const refchart = ref(null);
let echart = echarts.ECharts | null;
const resizeFn = () => {
  echart && echart.resize();
}
const dispose = () => {
  echart && echart.dispose()
}

onMounted(() => {
  window.removeEventListener("resize", resizeFn);
  setTimeout(() => {
    initChart();
  }, 1000);
  window.addEventListener("resize", resizeFn);
});

const initChart = () => {
  nextTick(() => {
    echart = echarts.init(refchart.value)
    const options = JSON.parse(JSON.stringify(props.options))
    console.info(options)
    echart.setOption({ ...options })
  })
}


onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeFn);
  dispose()
});

onUnmounted(() => {
  dispose()
})
</script>

<style scoped></style>
